<template>
	<div>
		<div class="searchWord">
			<el-form :inline="true" class="demo-form-inline">

				<el-form-item label="模糊条件">
					<el-input style="width: 200px;" placeholder="请输入内容" v-model="listDistributorParam.keyword"
						clearable>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" round @click="loadDistributor(1)">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" round @click="openAdd ">添加</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :disabled="ids.length <= 0" type="danger" @click="delDistributor">删除</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" round @click="openUpdate">修改</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div>
			<el-table :data="distributors" @selection-change="getChecks">
				<el-table-column type="selection" label="序号">
				</el-table-column>
				<el-table-column prop="distributorId" label="序号">
				</el-table-column>
				<el-table-column prop="distributorName" label="渠道名">
				</el-table-column>
				<el-table-column prop="distributorPhone" label="渠道商手机号">
				</el-table-column>

				<el-table-column label="状态">
					<template slot-scope="scope">
						{{ scope.row.distributorStatus == 1 ? '停用' : '启用' }}
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-pagination :page-sizes="sizes" @size-change="sizeChangeFind"
				:current-page="listDistributorParam.indexPage" @current-change="changePage" background
				layout="sizes, prev, pager, next" :total="total" :page-size="listDistributorParam.pageSize">
			</el-pagination>
		</div>
		<el-dialog @close="clearDistributorForm" title="新增渠道商" :visible.sync="addMovieVisible">
			<div>
				<el-form>
					<el-form-item label="渠道商名字">
						<el-input v-model="saveDistributorParam.distributorName"></el-input>
					</el-form-item>
					<el-form-item label="渠道商手机">
						<el-input v-model="saveDistributorParam.distributorPhone"></el-input>
					</el-form-item>

					<el-form-item label="状态">
						<el-radio-group v-model="saveDistributorParam.distributorStatus">
							<el-radio :label="0">启用</el-radio>
							<el-radio :label="1">停用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveDistributor">提 交</el-button>
			</div>
		</el-dialog>
		<el-dialog @close="clearUpForm" title="修改渠道商" :visible.sync="UpdateVisible">
			<div>
				<el-form>
					<el-form-item label="渠道商ID">
						<el-input v-model="updateDistributorParam.distributorId" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="渠道商名字">
						<el-input v-model="updateDistributorParam.distributorName"></el-input>
					</el-form-item>
					<el-form-item label="渠道商手机">
						<el-input v-model="updateDistributorParam.distributorPhone"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-radio-group v-model="updateDistributorParam.distributorStatus">
							<el-radio :label="0">启用</el-radio>
							<el-radio :label="1">停用</el-radio>
						</el-radio-group>
					</el-form-item>

				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="Update">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				listDistributorParam: {
					indexPage: 1,
					pageSize: 3,
					keyword: null,
					distributorStatus: null,
					distributorPhone: null,
					distributorName: null
				},
				total: 0,
				sizes: [1, 2, 3, 5, 10, 20],
				distributors: [],
				ids: [],
				//添加 弹出框
				addMovieVisible: false,
				//修改  弹出框
				UpdateVisible: false,
				//添加渠道商参数
				saveDistributorParam: {
					distributorStatus: null,
					distributorPhone: null,
					distributorName: null

				},
				updateDistributorParam: [],
		
			}
		},

		methods: {
			// 查询加载 渠道商
			loadDistributor(page) {
				if (page != undefined) {
					this.listDistributorParam.indexPage = page;
				}
				this.$http.post("/distributor/getdistributor", this.listDistributorParam).then(resp => {

					if (resp.data.code == 200) {

						this.distributors = resp.data.data.list;
						this.total = resp.data.data.total;
						this.listDistributorParam.indexPage = resp.data.data.indexPage;
					} else {
						this.$message({
							type: 'error',
							message: '查询失败 ' + resp.data.msg
						});
					}

				})
			},
			getChecks(sel) {
				this.ids = [];
				for (let i = 0; i < sel.length; i++) {
					this.ids.push(sel[i].distributorId);
				}
			},
			sizeChangeFind(size) {
				this.listDistributorParam.pageSize = size;
				this.loadDistributor();
			},
			changePage(page) {
				this.listDistributorParam.indexPage = page;
				this.loadDistributor();
			},
			delDistributor() {
				if (this.ids.length > 0) {
					this.$http.post("/distributor/deldistributors", this.ids).then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.loadDistributor();
						} else {
							this.$message({
								type: 'error',
								message: '删除失败 ' + resp.data.msg
							});
						}
					})
				}
			},
			//渠道商添加
			saveDistributor() {
				this.$http.post("/distributor/adddistributor", this.saveDistributorParam).then(resp => {

					if (resp.data.code == 200) {
						this.addMovieVisible = !this.addMovieVisible;
						this.$message({
							message: '添加成功',
							type: 'success',

						});

						this.clearDistributorForm();
						this.loadDistributor();
					} else {
						this.$message({
							type: 'error',
							message: '添加失败 ' + resp.data.msg
						});
					}
				})
			},
			openAdd() {
				this.addMovieVisible = !this.addMovieVisible;
				this.loadDistributor();
			},
			openUpdate() {
				if (!this.UpdateVisible) {
					if (this.ids.length <= 0 || this.ids.length > 1) {
						alert("选择错误")
						return;
					}
				}
				this.UpdateVisible = !this.UpdateVisible;
				// this.loadDistributor();
				this.$http.post("/distributor/findDistributorById/" + this.ids[0]).then(resp => {
					if (resp.data.code == 200) {

						this.updateDistributorParam = resp.data.data;
					} else {
						this.$message({
							type: 'error',
							message: '查询失败 ' + resp.data.msg
						});
					}

				})
			},
			clearDistributorForm() {
				this.saveDistributorParam = {
					distributorStatus: null,
					distributorPhone: null,
					distributorName: null
				}
			},
			clearUpForm() {
				this.updateDistributorParam = {
					distributorId: null,
					distributorStatus: null,
					distributorPhone: null,
					distributorName: null
				}
			},
			Update() {
				this.$http.post("/distributor/updatedistributors", this.updateDistributorParam).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: '更新成功',
							type: 'success'
						});

					} else {
						this.$message({
							type: 'error',
							message: '更新失败 ' + resp.data.msg
						});
					}
					this.clearUpForm();
					this.UpdateVisible = !this.UpdateVisible;
					this.loadDistributor();
				})

			},

		},
		created() {
			this.loadDistributor();

		}
	}
</script>

<style>
</style>
